import { Card, TextArea, Selector, Form } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import * as dataDictionary from "@shared/constant/dataDictionary";

const { Text } = Typography;

export function ScalpInfoForm() {

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                头皮信息
            </Text>

            <Flex vertical gap={16}>
                <Form.Item label="发质类型" name="hairType" style={{ width: '100%', padding: 0 }}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={Object.entries(dataDictionary.hairTypeStr).map(([key, value]) => ({ label: value, value: key }))} />
                </Form.Item>

                <Form.Item label="头皮状况" name="scalpCondition" style={{ width: '100%', padding: 0 }}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={Object.entries(dataDictionary.scalpConditionsStr).map(([key, value]) => ({ label: value, value: key }))} />
                </Form.Item>

                <Form.Item label="过敏史" name="allergyHistory" style={{ width: '100%', padding: 0 }}>
                    <TextArea placeholder="请输入过敏史信息，如无请填写'无'" />
                </Form.Item>

                <Form.Item label="客户偏好/备注" name="preference" style={{ width: '100%', padding: 0 }}>
                    <TextArea placeholder="请输入客户偏好或备注信息" rows={4} />
                </Form.Item>
            </Flex>
        </Card>
    );
}
